<template>
	<view class="container">
		<view class="payfor">
			<view>付款给商家</view>
			<!-- <image src="../../static/user/shangjia.png" mode="widthFix"></image> -->
		</view>
		<view class="point">积分</view>
		<view class="input-box">
			<image src="../../static/user/point-icon.png" mode="widthFix"></image>
			<input type="number"  placeholder="请输入积分" v-model="money" @input="inputmoney"/>
		</view>
		<view class="checkpayfor" :class="{'checkpayfor-after':flag}" @click="pay">确认支付</view>
	</view>
</template>

<script>
	import{xxpay}from"../../api/user.js"
	export default{
		data(){
			return{
				flag:false,
				money:'',
				id:null
			}
		},
		onLoad(e) {
			this.id=e.id
			console.log(e)
		},
		methods:{
			inputmoney(e){
				if(this.money.trim()!=''){
					this.flag=true
					let data = e.detail.value
					data= data.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符   
					data= data.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的   
					data= data.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
					data= data.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数   
					if (data.indexOf(".") < 0 && data != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
						data = parseFloat(data);
					}
					setTimeout(() => {
						// data=parseInt(data)
						this.money =data;
					},10)
				}else{
					this.flag=false
				}
				
			},
			async pay(){
				if(this.flag){
					this.showMd("确认支付",()=>{
						this.post(xxpay,{
							user_id:uni.getStorageSync("userInfo").id,
							shop_id:this.id,
							num:this.money
						}).then(res=>{
							this.msg("支付成功")
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						})
					})
				}
			}
		}
	}
</script>

<style>
	.container{
		padding: 40rpx 30rpx;
	}
	.payfor{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.payfor>image{
		width: 72rpx;
	}
	.point{
		margin-top: 50rpx;
		font-size: 26rpx;
		font-weight: 300;
		/* color: #999999; */
	}
	.input-box{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		border-bottom: 1px solid #D5D5D5;
		padding-bottom: 21rpx;
	}
	.input-box>image{
		width: 36rpx;
	}
	.input-box>input{
		padding-left: 40rpx;
		font-size: 30rpx;
	}
	.checkpayfor{
		width: 690rpx;
		height: 88rpx;
		/* background: #008573;
		opacity: 1; */
		background: #008573;
		opacity: 0.3;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 120rpx;
	}
	.checkpayfor-after{
		background: #008573;
		opacity: 1;
	}
</style>
